<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div id="g2-chart"></div>
    <script>
      const data = [
        { year: "1991", value: 3 },
        { year: "1992", value: 4 },
        { year: "1993", value: 3.5 },
        { year: "1994", value: 5 },
        { year: "1995", value: 4.9 },
        { year: "1996", value: 6 },
        { year: "1997", value: 7 },
        { year: "1998", value: 9 },
        { year: "1999", value: 13 },
      ];

      const chartDom = document.getElementById("g2-chart");
      const plot = new G2Plot.Line(chartDom, {
        title: {
          visible: true,
          text: "g2折线图示例",
        },
        data,
        xField: "year",
        yField: "value",
        description: {
          visible: true,
          text:
            "折线图用于表示连续时间跨度内的数据，它通常用于显示某变量随时间的变化模式。",
        },
        point: {
          visible: true,
        },
        label: {
          visible: true,
        },
        color: "#FE740C",
        point: {
          visible: true,
          size: 5,
          color: "white",
          style: {
            stroke: "#FE740C",
            lineWidth: 2,
            fillOpacity: 0.6,
          },
        },
        yAxis: {
          formatter: (v) => {
            return v + "k";
          },
        },
      });
      plot.render();
    </script>
  </body>
</html>
